<template>
    <div>
        <div class="cell">
            <div class="cell_item" v-for="(item, index) in list" :key="index">
                <div>
                    <p>{{item.accountName}}<em>（{{['支付宝', '微信', '银行卡'][+item.accountType]}}）</em></p>
                    <div>
                        <span @click="openAdPopup(item)" class="mar-r20" style="color: blue">编辑</span>
                        <span @click="deleteItem(item)" class="color-red">删除</span>
                    </div>
                </div>
                <p>{{item.accountNumber}}</p>
            </div>
        </div>
        <div class="btn add_new" @click="openAdPopup">新增账户</div>

        <uni-popup ref="editBank" type="center">
            <div class="add_box">
                <div class="title">提现账户</div>
                <div class="add_item">
                    <span>账号类型</span>
                    <div>
                        <label class="flex-v-center" @click="edit.accountType = '00'">
                            <radio style="zoom:0.8" :checked="edit.accountType == '00'" />
                            支付宝
                        </label>
                        <!-- <label class="flex-v-center" @click="edit.accountType = '01'">
                            <radio style="zoom:0.8" :checked="edit.accountType == '01'" />
                            微信
                        </label> -->
                        <label class="flex-v-center" @click="edit.accountType = '02'">
                            <radio style="zoom:0.8" :checked="edit.accountType == '02'" />
                            银行卡
                        </label>

                    </div>
                </div>
                <div class="add_item">
                    <span>姓名</span>
                    <div><input type="text" v-model="edit.accountName" placeholder="请输入姓名" placeholder-class="placeholder"></div>
                </div>
                <div class="add_item">
                    <span>账号</span>
                    <div><input type="text" v-model="edit.accountNumber" placeholder="请输入账号" placeholder-class="placeholder"></div>
                </div>
                <div class="btns">
                    <div class="btn" @click="cancelAdd">取消</div>
                    <div class="btn" @click="submitAdd">确定</div>
                </div>
            </div>
        </uni-popup>
    </div>
</template>

<script>
import { editUserBankAccount, getUserBanks } from '@/request/user'
export default {
    data() {
        return {
            list: [],
            edit: {
                id: void 0,
                accountType: '00', // 00支付宝，01微信，02银行卡
                accountName: '',
                accountNumber: ''

            }



        }
    },
    onLoad() {
        this.getList()
    },
    methods: {
        getList() {
            getUserBanks().then(res => {
                this.list = res.data
            })
        },
        openAdPopup(item) {
            if(item.id) {
                this.edit = {
                    ...item
                }
            } else {
                this.edit = {
                    accountType: '00', // 00支付宝，01微信，02银行卡
                    accountName: '',
                    accountNumber: ''
                }
            }
            this.$refs.editBank.open()
        },
        cancelAdd() {
            this.$refs.editBank.close()
        },

        deleteItem(item) {
            this.$interact.modal({
                title: '提示',
                content: '是否删除？',
                showCancel: true
            }).then(action => {
                if(action.confirm) {
                    editUserBankAccount({
                        id: item.id,
                        isDel: '01'
                    }).then(res => {
                        this.$interact.toast(res.msg)
                        this.getList()
                    })
                }
            })
        },
        submitAdd() {
            if(!this.edit.accountName) return this.$interact.toast('请输入姓名')
            if(!this.edit.accountNumber) return this.$interact.toast('请输入账号')
            editUserBankAccount({
                id: this.edit.id,
                accountName: this.edit.accountName,
                accountNumber: this.edit.accountNumber,
                accountType: this.edit.accountType,
            }).then(res => {
                this.$interact.toast(res.msg)
                this.$refs.editBank.close()
                this.getList()
            })
        }

    }
}
</script>

<style lang="less" scoped>
.cell{
    padding: 30rpx 30rpx 200rpx;
    .cell_item{
        background: #fff;
        border-radius: 10rpx;
        padding: 30rpx 30rpx;
        margin-bottom: 30rpx;
        >div{
            display: flex;
            margin-bottom: 15rpx;
            justify-content: space-between;
            em{
                margin-left: 20rpx;
                font-size: 26rpx;
                color: #999;
            }
        }
    }
}

.add_new{
    position: fixed;
    left: 30rpx;
    bottom: 30rpx;
    background: #018d0f;
    width: 690rpx;
}

.btn{
    height: 90rpx;
    margin: 60rpx auto;
    .align(center);
    color: #fff;
    font-size: 34rpx;
    font-weight: bold;
    border-radius: 10rpx;
    
}

.add_box{
    width: 680rpx;
    height: 580rpx;
    background: #fff;
    border-radius: 15rpx;
    padding: 0 20rpx;

    .title{
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        font-size: 36rpx;
        font-weight: bold;
        color: #666;
        text-align: center;
    }
    .add_item{
        width: 100%;
        height: 100rpx;
        border-bottom: 1px solid #ddd;
        display: flex;
        align-items: center;
        span{
            width: 120rpx;
            margin-right: 20rpx;
        }
        >div{
            flex: 1;
            height: 100%;
            display: flex;
            input{
                width: 100%;
                height: 100%;   
            }
            label{
                margin-right: 30rpx;
            }
        }
    }
    .btns{
        display: flex;
        justify-content: space-between;
        .btn{
            width: 300rpx;
            background: #007aff;
            font-weight: normal;
            &:first-child{
                color: #666;
                border: 1px solid #ddd;
                background: #fff;
            }
        }
    }

}
</style>